import { originHeight } from "@/config/config";
import { watch, ref, Ref } from "vue";
import _ from "lodash";

// 定义更精确的类型
interface HTMLElementWithStyle extends HTMLElement {
  style: CSSStyleDeclaration;
}

// 使用更具体的类型定义
export const currentHeight: Ref<number> = ref(0);

/**
 * 重置页面字体大小
 * 根据当前屏幕高度和基准高度计算缩放比例，设置根元素字体大小
 */
function resetPage(): void {
  requestAnimationFrame(() => {
    // 获取当前视窗高度
    const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    currentHeight.value = clientHeight;

    // 以100px为基准计算字体大小并设置
    const fontSize = setFontSize(100);
    (document.documentElement as HTMLElementWithStyle).style.fontSize = `${fontSize}px`;
  });
}

/**
 * 监听窗口大小变化并调用指定函数
 * @param func 窗口大小变化时要调用的函数
 */
export function listenResize(func: () => void = () => { }): void {
  watch(currentHeight, () => {
    requestAnimationFrame(func);
  });
}

/**
 * 根据缩放比例计算字体大小
 * @param baseSize 基准字体大小，默认100px
 * @returns 计算后的字体大小
 */
export function setFontSize(baseSize: number = 100): number {
  // 计算屏幕的缩放比例
  const scaleRatio = currentHeight.value / originHeight;

  // 按照默认 font-size 100px 进行计算转 rem
  return Math.ceil(baseSize * scaleRatio);
}

// 使用节流避免频繁触发造成性能问题
const listenScale = _.throttle(resetPage, 500);

/**
 * 监听尺寸变化并做出响应操作
 * 初始化页面并添加 resize 事件监听器
 */
export default function listenResizeChange(): void {
  // 初始化 - 第一次执行
  resetPage();

  // 监听屏幕尺寸变化
  window.addEventListener("resize", listenScale, false);
}

/**
 * 移除 resize 事件监听器
 */
export function removeListenScale(): void {
  window.removeEventListener("resize", listenScale, false);
}